<template>
  <transition name="fade">
    <div
      v-if="visible"
      class="fixed bottom-4 right-4 flex items-center p-4 bg-blue-700 text-white rounded-lg shadow-lg"
    >
      <svg
        class="w-5 h-5 mr-2"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M5 13l4 4L19 7"
        />
      </svg>
      <span>同步完成</span>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      visible: true,
    };
  },
  methods: {
    show() {
      this.visible = true;
      setTimeout(() => {
        this.visible = false;
      }, 3000); // Toast will disappear after 3 seconds
    },
  },
  mounted() {
    this.show();
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>
